<template>
  <div class="index-container">
    <as-header title="ASUI Components" fixed></as-header>
    <div class="top"></div>
    <as-cell
      :title="item"
      :to="`#/${item.toLowerCase()}`"
      v-for="item in components"
      :key="item"
    ></as-cell>
  </div>
</template>

<script>
export default {
  data() {
    return {
      components: [
        'Toast',
        'MessageBox',
        'Dialog',
        'Lazyload',
        'Button',
        'Search',
        'Picker',
        'Swipe',
        'Switch',
        'Popup',
        'Tooltip',
        'Radio',
        'Checkbox',
        'ImagePreview',
        'ActionSheet',
        'Header',
        'Tabbar',
        'Navbar',
        'Cell',
        'Badge',
        'ScrollerView'
      ]
    }
  }
}
</script>

<style lang="scss">
body {
  font-family: Arial, 'Microsoft YaHei';

  .iconfont.icon-zuosanjiao {
    font-size: 36px;
    color: #fff;
  }
  .index-container {
    .top {
      padding-top: 88px;
    }
  }
}
</style>
